﻿@{
    ViewBag.Title = "智慧仓储数据分析中心";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<style>
    /* 全局样式与科技风格 */
    body {
        background-color: #0a1929;
        color: #e6f7ff;
    }
    
    .main-container {
        padding: 20px;
        max-width: 1800px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
    }

    /* 背景网格效果 */
    .tech-bg {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: 
            linear-gradient(rgba(8, 26, 45, 0.6) 1px, transparent 1px),
            linear-gradient(90deg, rgba(8, 26, 45, 0.6) 1px, transparent 1px);
        background-size: 30px 30px;
        background-position: center center;
        z-index: 0;
        pointer-events: none;
    }

    /* 霓虹效果 */
    .neon-border {
        position: relative;
    }
    
    .neon-border::after {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        border-radius: 9px;
        background: linear-gradient(45deg, #00b0ff, #3d5afe, #651fff, #00e5ff);
        z-index: -1;
        filter: blur(3px);
        opacity: 0.5;
        transition: opacity 0.3s ease;
    }
    
    .neon-border:hover::after {
        opacity: 0.8;
    }

    /* 页面标题区 */
    .page-header {
        margin-bottom: 25px;
        border-bottom: 1px solid rgba(102, 204, 255, 0.2);
        padding-bottom: 15px;
        position: relative;
    }
    
    .page-title {
        font-size: 26px;
        color: #2196F3;
        font-weight: 600;
        margin: 0;
        text-shadow: 0 0 10px rgba(33, 150, 243, 0.4);
        letter-spacing: 1px;
    }
    
    .page-subtitle {
        font-size: 14px;
        color: #81D4FA;
        margin-top: 5px;
        opacity: 0.8;
    }
    
    /* 卡片样式科技化 */
    .layui-card {
        border-radius: 8px;
        box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.3);
        margin-bottom: 20px;
        border: 1px solid rgba(102, 204, 255, 0.2);
        background-color: rgba(10, 25, 41, 0.8);
        color: #e6f7ff;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    .layui-card:hover {
        box-shadow: 0 6px 25px 0 rgba(33, 150, 243, 0.2);
        border: 1px solid rgba(102, 204, 255, 0.4);
    }
    
    .layui-card-header {
        font-weight: 600;
        font-size: 16px;
        color: #E1F5FE;
        border-bottom: 1px solid rgba(102, 204, 255, 0.2);
        padding: 16px;
        background-color: rgba(15, 35, 60, 0.5);
        border-radius: 8px 8px 0 0;
        display: flex;
        align-items: center;
    }

    .layui-card-header::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 16px;
        background: linear-gradient(to bottom, #00b0ff, #3d5afe);
        margin-right: 10px;
        border-radius: 3px;
    }
    
    .layui-card-body {
        height: auto;
        min-height: 80px;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    /* 搜索区域 */
    .search-card {
        margin-bottom: 25px;
    }
    
    .search-card .layui-card-body {
        padding: 25px 20px 15px;
    }
    
    .layui-btn {
        background-color: #0288D1;
        height: 38px;
        line-height: 38px;
        padding: 0 20px;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
    }

    .layui-btn:after {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
        transition: 0.6s;
    }

    .layui-btn:hover:after {
        left: 100%;
    }
    
    .layui-btn-primary {
        border: 1px solid rgba(102, 204, 255, 0.3);
        background-color: rgba(15, 35, 60, 0.3);
        color: #81D4FA;
    }
    
    /* 统计卡片 */
    .stat-card .layui-card-body {
        padding: 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 120px;
        background: linear-gradient(135deg, rgba(15, 40, 70, 0.8), rgba(10, 25, 41, 0.8));
        position: relative;
        overflow: hidden;
    }

    .stat-card .layui-card-body::before {
        content: '';
        position: absolute;
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, rgba(33, 150, 243, 0.1) 0%, transparent 70%);
        bottom: -100px;
        right: -100px;
        border-radius: 50%;
    }

    .stat-icon {
        font-size: 24px;
        margin-bottom: 15px;
        color: #4FC3F7;
    }
    
    .stat-label {
        font-size: 14px;
        color: #B3E5FC;
        margin-bottom: 10px;
    }
    
    .stat-number {
        font-size: 30px;
        font-weight: 700;
        color: #E1F5FE;
        text-shadow: 0 0 10px rgba(33, 150, 243, 0.5);
    }
    
    .stat-card:nth-child(1) .stat-number {
        color: #29B6F6;
    }
    
    .stat-card:nth-child(2) .stat-number {
        color: #26C6DA;
    }
    
    .stat-card:nth-child(3) .stat-number {
        color: #26A69A;
    }
    
    .stat-card:nth-child(4) .stat-number {
        color: #66BB6A;
    }
    
    /* 图表容器 */
    .chart-container {
        height: 550px;
        width: 100%;
        padding: 10px;
    }
    
    .chart-card .layui-card-body {
        height: 600px;
        padding: 10px;
    }
    
    /* 表单样式 */
    .layui-form-label {
        width: 100px;
        padding: 9px 15px;
        font-size: 14px;
        color: #90CAF9;
    }
    
    .layui-input-block {
        margin-left: 130px;
    }
    
    .layui-input, .layui-select, .layui-textarea {
        height: 38px;
        line-height: 38px;
        border: 1px solid rgba(102, 204, 255, 0.3);
        border-radius: 4px;
        padding-left: 10px;
        background-color: rgba(15, 35, 60, 0.5);
        color: #E1F5FE;
    }

    .layui-input:focus, .layui-select:focus, .layui-textarea:focus {
        border-color: rgba(33, 150, 243, 0.8);
        box-shadow: 0 0 5px rgba(33, 150, 243, 0.3);
    }

    /* 下拉框样式优化 */
    .layui-form-select dl {
        top: 42px;
        max-height: 300px;
        background-color: rgba(15, 35, 60, 0.95);
        border: 1px solid rgba(102, 204, 255, 0.3);
        color: #E1F5FE;
        z-index: 999;
        overflow-y: auto;
        border-radius: 0 0 4px 4px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .layui-form-select dl dd {
        height: 36px;
        line-height: 36px;
        padding: 0 10px;
        cursor: pointer;
    }

    .layui-form-select dl dd:hover {
        background-color: rgba(33, 150, 243, 0.2);
    }

    .layui-form-select dl dd.layui-this {
        background-color: rgba(33, 150, 243, 0.5);
        color: #FFFFFF;
    }

    /* 下拉框箭头 */
    .layui-form-select .layui-edge {
        border-top-color: rgba(102, 204, 255, 0.8);
    }

    /* 数据流动动画 */
    .data-flow {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }

    .data-particle {
        position: absolute;
        width: 2px;
        height: 2px;
        background-color: rgba(33, 150, 243, 0.5);
        border-radius: 50%;
        box-shadow: 0 0 3px #29B6F6;
    }
</style>

<!-- 引入ECharts -->
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js"></script>

<!-- 科技背景 -->
<div class="tech-bg"></div>

<div class="main-container">
    <!-- 页面标题 -->
    <div class="page-header">
        <h2 class="page-title">智慧仓储数据分析中心</h2>
        <div class="page-subtitle">Enterprise Inventory Intelligence Platform · 实时数据监控</div>
    </div>
    
    <!-- 搜索区域 -->
    <div class="layui-card search-card neon-border">
        <div class="layui-card-header">数据筛选</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-row layui-col-space25">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">物料分类</label>
                            <div class="layui-input-block">
                                <select name="productClass" lay-filter="productClass">
                                    <option value="">全部</option>
                                    <option value="1">原材料</option>
                                    <option value="2">半成品</option>
                                    <option value="3">成品</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">所属仓库</label>
                            <div class="layui-input-block">
                                <select name="warehouse" id="warehouseSelect" lay-filter="warehouse">
                                    <option value="">全部</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">供应商名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="supplier" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">库存有效期</label>
                            <div class="layui-input-block">
                                <input type="text" name="expiryDate" id="expiryDate" placeholder="请选择库存有效期" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md12" style="text-align: center; margin-top: 10px;">
                        <div class="layui-form-item">
                            <button class="layui-btn" style="width: 120px;" lay-submit lay-filter="formSearch">
                                <i class="layui-icon">&#xe615;</i> 搜索
                            </button>
                            <button type="reset" class="layui-btn layui-btn-primary" style="width: 120px; margin-left: 20px;">
                                <i class="layui-icon">&#xe669;</i> 重置
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- 统计卡片 -->
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md3">
            <div class="layui-card stat-card neon-border">
                <div class="layui-card-header">总库存数量</div>
                <div class="layui-card-body">
                    <div class="stat-icon">
                        <i class="layui-icon">&#xe657;</i>
                    </div>
                    <div class="stat-label">当前库存总数</div>
                    <div class="stat-number" id="totalInventory">2,190,636</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card stat-card neon-border">
                <div class="layui-card-header">物料种类</div>
                <div class="layui-card-body">
                    <div class="stat-icon">
                        <i class="layui-icon">&#xe62a;</i>
                    </div>
                    <div class="stat-label">物料分类数量</div>
                    <div class="stat-number" id="materialTypes">25</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card stat-card neon-border">
                <div class="layui-card-header">仓库数量</div>
                <div class="layui-card-body">
                    <div class="stat-icon">
                        <i class="layui-icon">&#xe630;</i>
                    </div>
                    <div class="stat-label">当前活跃仓库</div>
                    <div class="stat-number" id="warehouseCount">6</div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div class="layui-card stat-card neon-border">
                <div class="layui-card-header">即将过期物料</div>
                <div class="layui-card-body">
                    <div class="stat-icon">
                        <i class="layui-icon">&#xe60b;</i>
                    </div>
                    <div class="stat-label">7天内过期物料</div>
                    <div class="stat-number" id="expiringMaterial">1</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 图表区域 -->
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md6">
            <div class="layui-card chart-card neon-border">
                <div class="layui-card-header">库存数量分析</div>
                <div class="layui-card-body">
                    <div id="inventoryChart" class="chart-container"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card chart-card neon-border">
                <div class="layui-card-header">库存物料分布</div>
                <div class="layui-card-body">
                    <div id="distributionChart" class="chart-container"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- 数据流动动画元素 -->
    <div class="data-flow" id="dataFlow"></div>
</div>

@section scripts {
    <script>
        layui.use(['form', 'laydate', 'jquery'], function () {
            var form = layui.form,
                laydate = layui.laydate,
                $ = layui.jquery;
            
            // 创建数据流动效果
            function createDataFlow() {
                var dataFlow = document.getElementById('dataFlow');
                var maxParticles = 30;
                
                for(var i = 0; i < maxParticles; i++) {
                    setTimeout(function() {
                        var particle = document.createElement('div');
                        particle.className = 'data-particle';
                        
                        // 随机位置
                        var startX = Math.random() * window.innerWidth;
                        var startY = Math.random() * window.innerHeight;
                        
                        // 设置样式
                        particle.style.left = startX + 'px';
                        particle.style.top = startY + 'px';
                        
                        // 随机大小
                        var size = Math.random() * 3 + 1;
                        particle.style.width = size + 'px';
                        particle.style.height = size + 'px';
                        
                        // 随机透明度
                        particle.style.opacity = Math.random() * 0.5 + 0.3;
                        
                        // 添加到DOM
                        dataFlow.appendChild(particle);
                        
                        // 动画
                        var angle = Math.random() * Math.PI * 2;
                        var speed = Math.random() * 100 + 50;
                        var dirX = Math.cos(angle) * speed;
                        var dirY = Math.sin(angle) * speed;
                        
                        var startTime = Date.now();
                        var duration = Math.random() * 5000 + 3000; // 3-8秒
                        
                        function animate() {
                            var elapsed = Date.now() - startTime;
                            var progress = elapsed / duration;
                            
                            if(progress >= 1) {
                                dataFlow.removeChild(particle);
                                return;
                            }
                            
                            var currentX = parseFloat(particle.style.left) + dirX * progress / 100;
                            var currentY = parseFloat(particle.style.top) + dirY * progress / 100;
                            
                            particle.style.left = currentX + 'px';
                            particle.style.top = currentY + 'px';
                            
                            requestAnimationFrame(animate);
                        }
                        
                        requestAnimationFrame(animate);
                    }, i * 200); // 每隔200ms创建一个粒子
                }
                
                // 每隔一段时间重新创建粒子
                setTimeout(createDataFlow, 8000);
            }
            
            // 初始化数据流效果
            createDataFlow();
            
            // 初始化日期选择器
            laydate.render({
                elem: '#expiryDate',
                range: true,
                theme: '#0288D1'
            });

            // 格式化数字显示
            function formatNumber(num) {
                return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
            }

            // 初始化图表
            var barChart = echarts.init(document.getElementById('inventoryChart'));
            var pieChart = echarts.init(document.getElementById('distributionChart'));

            // 加载仓库列表
            function loadWarehouses() {
                $.ajax({
                    url: '/InventoryData/GetWarehouses',
                    type: 'GET',
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            var warehouseSelect = $('#warehouseSelect');
                            warehouseSelect.empty();
                            
                            $.each(res.data, function (index, item) {
                                warehouseSelect.append('<option value="' + item.id + '">' + item.name + '</option>');
                            });
                            
                            form.render('select');
                        }
                    }
                });
            }

            // 加载统计数据
            function loadInventoryStats(warehouseId) {
                $.ajax({
                    url: '/InventoryData/GetInventoryStats',
                    type: 'GET',
                    data: { warehouseId: warehouseId },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            $('#totalInventory').text(formatNumber(res.data.total));
                            $('#materialTypes').text(res.data.types);
                            $('#warehouseCount').text(res.data.count);
                            $('#expiringMaterial').text(res.data.expiring);
                        }
                    }
                });
            }

            // 加载柱状图数据
            function loadBarChartData(warehouseId) {
                $.ajax({
                    url: '/InventoryData/GetInventoryBarData',
                    type: 'GET',
                    data: { warehouseId: warehouseId },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            // 更新柱状图
                            barChart.setOption({
                                backgroundColor: 'transparent',
                                title: {
                                    text: '主要物料库存量分布',
                                    left: 'center',
                                    top: 10,
                                    textStyle: {
                                        fontSize: 16,
                                        color: '#E1F5FE'
                                    }
                                },
                                color: ['#00B0FF'],
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'shadow'
                                    },
                                    textStyle: {
                                        fontSize: 14
                                    },
                                    formatter: function(params) {
                                        return params[0].name + '<br/>' +
                                               params[0].seriesName + ': ' + formatNumber(params[0].value);
                                    },
                                    borderWidth: 0,
                                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                                    borderColor: 'rgba(102, 204, 255, 0.3)',
                                    textStyle: { color: '#E1F5FE' }
                                },
                                grid: {
                                    left: '5%',
                                    right: '5%',
                                    bottom: '15%',
                                    top: '15%',
                                    containLabel: true
                                },
                                xAxis: [
                                    {
                                        type: 'category',
                                        data: res.data.labels,
                                        axisTick: {
                                            alignWithLabel: true,
                                            lineStyle: { color: 'rgba(102, 204, 255, 0.3)' }
                                        },
                                        axisLabel: {
                                            fontSize: 12,
                                            margin: 15,
                                            interval: 0,
                                            rotate: 30,
                                            color: '#B3E5FC',
                                            formatter: function(value) {
                                                if (value.length > 12) {
                                                    return value.substring(0, 10) + '...';
                                                }
                                                return value;
                                            }
                                        },
                                        axisLine: {
                                            lineStyle: {
                                                color: 'rgba(102, 204, 255, 0.3)'
                                            }
                                        },
                                        splitLine: {
                                            show: false
                                        }
                                    }
                                ],
                                yAxis: [
                                    {
                                        type: 'value',
                                        name: '库存数量',
                                        nameTextStyle: {
                                            fontSize: 14,
                                            color: '#B3E5FC',
                                            padding: [0, 0, 0, 30]
                                        },
                                        axisLabel: {
                                            fontSize: 12,
                                            color: '#B3E5FC',
                                            formatter: function(value) {
                                                if (value >= 10000) {
                                                    return (value / 10000) + '万';
                                                }
                                                return value;
                                            }
                                        },
                                        axisLine: {
                                            show: false
                                        },
                                        axisTick: {
                                            show: false
                                        },
                                        splitLine: {
                                            lineStyle: {
                                                type: 'dashed',
                                                color: 'rgba(102, 204, 255, 0.2)'
                                            }
                                        }
                                    }
                                ],
                                series: [
                                    {
                                        name: '库存数量',
                                        type: 'bar',
                                        barWidth: '50%',
                                        data: res.data.values,
                                        itemStyle: {
                                            borderRadius: [6, 6, 0, 0],
                                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                { offset: 0, color: '#00B0FF' },
                                                { offset: 0.5, color: '#0091EA' },
                                                { offset: 1, color: '#0277BD' }
                                            ]),
                                            shadowColor: 'rgba(0, 176, 255, 0.5)',
                                            shadowBlur: 10
                                        },
                                        emphasis: {
                                            itemStyle: {
                                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                                    { offset: 0, color: '#29B6F6' },
                                                    { offset: 0.7, color: '#0288D1' },
                                                    { offset: 1, color: '#01579B' }
                                                ]),
                                                shadowColor: 'rgba(0, 176, 255, 0.8)',
                                                shadowBlur: 20
                                            }
                                        },
                                        label: {
                                            show: true,
                                            position: 'top',
                                            fontSize: 12,
                                            color: '#B3E5FC',
                                            formatter: function(params) {
                                                if (params.value > 10000) {
                                                    return (params.value / 10000).toFixed(1) + '万';
                                                }
                                                return params.value;
                                            }
                                        }
                                    }
                                ]
                            });
                        }
                    }
                });
            }

            // 加载饼图数据
            function loadPieChartData(warehouseId) {
                $.ajax({
                    url: '/InventoryData/GetInventoryPieData',
                    type: 'GET',
                    data: { warehouseId: warehouseId },
                    dataType: 'json',
                    success: function (res) {
                        if (res.code === 0) {
                            // 更新饼图
                            pieChart.setOption({
                                backgroundColor: 'transparent',
                                title: {
                                    text: '库存物料类型占比',
                                    left: 'center',
                                    top: 10,
                                    textStyle: {
                                        fontSize: 16,
                                        color: '#E1F5FE'
                                    }
                                },
                                color: [
                                    '#2196F3', '#00BCD4', '#4CAF50', '#8BC34A', '#CDDC39',
                                    '#FFC107', '#FF9800', '#FF5722', '#F44336', '#E91E63'
                                ],
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{a} <br/>{b}: {c} ({d}%)',
                                    textStyle: {
                                        fontSize: 14
                                    },
                                    borderWidth: 0,
                                    backgroundColor: 'rgba(15, 35, 60, 0.7)',
                                    borderColor: 'rgba(102, 204, 255, 0.3)',
                                    textStyle: { color: '#E1F5FE' }
                                },
                                legend: {
                                    type: 'scroll',
                                    orient: 'horizontal',
                                    bottom: 10,
                                    left: 'center',
                                    itemWidth: 18,
                                    itemHeight: 10,
                                    textStyle: {
                                        fontSize: 12,
                                        color: '#B3E5FC'
                                    },
                                    pageIconColor: '#B3E5FC',
                                    pageIconInactiveColor: 'rgba(255, 255, 255, 0.3)',
                                    pageTextStyle: {
                                        color: '#B3E5FC'
                                    },
                                    formatter: function(name) {
                                        // 提取名称前部分，不含百分比
                                        return name.split('(')[0];
                                    },
                                    data: res.data.map(function(item) { return item.name; })
                                },
                                series: [
                                    {
                                        name: '库存物料分布',
                                        type: 'pie',
                                        radius: ['35%', '65%'],
                                        center: ['50%', '50%'],
                                        avoidLabelOverlap: true,
                                        label: {
                                            show: true,
                                            formatter: '{b}',
                                            fontSize: 12,
                                            color: '#E1F5FE',
                                            position: 'outside',
                                            overflow: 'truncate',
                                            width: 80,
                                            lineHeight: 15,
                                            rich: {
                                                b: {
                                                    color: '#E1F5FE',
                                                    fontSize: 12,
                                                    lineHeight: 15
                                                }
                                            }
                                        },
                                        emphasis: {
                                            label: {
                                                show: true,
                                                fontSize: 14,
                                                fontWeight: 'bold'
                                            },
                                            itemStyle: {
                                                shadowBlur: 20,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 176, 255, 0.8)'
                                            }
                                        },
                                        labelLine: {
                                            show: true,
                                            length: 15,
                                            length2: 10,
                                            smooth: true,
                                            lineStyle: {
                                                color: 'rgba(255, 255, 255, 0.5)'
                                            }
                                        },
                                        itemStyle: {
                                            borderRadius: 5,
                                            borderWidth: 2,
                                            borderColor: 'rgba(10, 25, 41, 0.8)',
                                            shadowBlur: 10,
                                            shadowColor: 'rgba(0, 176, 255, 0.3)'
                                        },
                                        data: res.data
                                    }
                                ]
                            });
                        }
                    }
                });
            }

            // 加载所有数据
            function loadAllData(warehouseId) {
                loadInventoryStats(warehouseId);
                loadBarChartData(warehouseId);
                loadPieChartData(warehouseId);
            }

            // 监听仓库选择变化
            form.on('select(warehouse)', function (data) {
                loadAllData(data.value);
                return false;
            });

            // 监听表单提交
            form.on('submit(formSearch)', function (data) {
                loadAllData(data.field.warehouse);
                return false;
            });

            // 初始化页面
            loadWarehouses();
            loadAllData('');

            // 窗口大小改变时重新调整图表大小
            window.addEventListener('resize', function () {
                barChart.resize();
                pieChart.resize();
            });
        });
    </script>
}